import { Card, Form, Input, Space, Button, Select } from 'antd'
import React, { useEffect, useState } from 'react'
import { SearchOutlined } from '@ant-design/icons'
import { HospitalListItem, DictItem, SearchHospitalListParams } from '@/api/hopaital/hopaitalList/types';
import Table, { ColumnsType } from 'antd/lib/table';
import { reqGetCitiesOrDistrict, reqGetHosTypes, reqGetProvince } from '@/api/hopaital/hopaitalList';
//获取 Option 组件
const { Option } = Select;
export default function HospitalList() {
  // 医院列表
  const [hospitalList, setHospitalList] = useState<DictItem[]>([])
  const [current, setCurrent] = useState(1)
  const [pageSize, setPageSize] = useState(3)
  const [total, setTotal] = useState(0)
  const [loading, setLoading] = useState(false)
  // 请求医院的设置
  const getHospitalLiat = async (current: number, pageSize: number, searchParams: SearchHospitalListParams) => {

  }
  // 定义初始的状态
  let [province, setProvince] = useState<DictItem[]>([]);
  // 初始化loading状态
  let [provinceLoading, setProvinceLoading] = useState(false);
  // 声明城市的信息
  let [cities, setCities] = useState<DictItem[]>([])
  // 设置市的设置
  let [district, setDistrict] = useState<DictItem[]>([])
  // 设置医院状态的信息
  let [hostypes, setHostypes] = useState<DictItem[]>([])
  let [form] = Form.useForm();
  let onFinish = () => { }
  let reset = () => { }
  let remove = () => { }
  let getCities = async (provinceId: number) => {
    form.setFieldsValue({ cityCode: undefined, districtCode: undefined })
    // 发送请求
    let result = await reqGetCitiesOrDistrict(provinceId);
    setCities(result)
  }
  let getDistrict = async (cityCode: number) => {
    // 清空
    form.setFieldsValue({ districtCode: undefined });
    let district = await reqGetCitiesOrDistrict(cityCode)
    setDistrict(district);
  }
  useEffect(() => {
    let gatData = async () => {
      let hostype = await reqGetHosTypes();
      setHostypes(hostype);
    }
    gatData();
  }, [])



  const columns: ColumnsType<HospitalListItem> = [
    {
      title: '序号',
      render: (_, record, index) => {
        return index + 1
      },
      align: 'center',
      width: 80
    },
    {
      title: '医院logo',
      dataIndex: 'logoData',
      render: value => {
        return <img width='80' src={'data:image/png;base64,' + value} />
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname'
    },
    {
      title: '等级',
      dataIndex: 'hostypeString',
      render: (_, record) => {
        return record.param.hostypeString;
      },
    },
    {
      title: '详细地址',
      dataIndex: 'fullAddress',
      render: (_, record) => {
        return record.param.fullAddress;
      },
    },
    {
      title: '状态',
      render: status => status ? '已上线' : '未上线'
    },
    {
      title: '创建时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      render: (_, record) => {
        return (
          <Space>
            <Button type='primary'  >查看</Button>
            <Button type='primary'  >排班</Button>
            <Button type='primary'  >下线</Button>
          </Space>
        )
      }
    },
  ]
  useEffect(() => {
    let getData = async () => {
      let result = await reqGetProvince();
      setProvince(result);
    }
    getData();
  }, [])

  return (
    <Card>
      {/* 表单部分 */}
      <Form
        form={form}
        name="basic"
        onFinish={onFinish}
        autoComplete="off"
        layout="inline"
      >
        <Form.Item name="provinceCode" style={{ width: 200, marginBottom: 20 }}>
          <Select
            loading={provinceLoading}
            onFocus={async () => {
              // 判断
              if (province.length > 0) return;
              setProvinceLoading(true);
              // 发送请求
              let result = await reqGetProvince();
              setProvince(result);
              setProvinceLoading(false);
            }}
            placeholder="请选择省"
            onChange={getCities}
            allowClear
          >
            {
              province.map(item => {
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }

          </Select>
        </Form.Item>
        <Form.Item name="cityCode" style={{ width: 200 }}>
          <Select
            placeholder="请选择市"
            onChange={getDistrict}
            allowClear
          >
            {
              cities.map(item => {
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item name="districtCode" style={{ width: 200 }}>
          <Select
            placeholder="请选择区"
            onChange={() => { }}
            allowClear
          >
            {
              district.map(item => {
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>


        <Form.Item name="hosname">
          <Input placeholder="医院名称" />
        </Form.Item>

        <Form.Item name="hoscode">
          <Input placeholder="医院编号" />
        </Form.Item>
        <Form.Item name="hostype" style={{ width: 200 }}>
          <Select
            placeholder="医院类型"
            onChange={() => { }}
            allowClear
          >
            {
              hostypes.map(item => {
                return <Option key={item.id} value={item.value}>{item.name}</Option>
              })
            }
          </Select>
        </Form.Item>

        <Form.Item name="status" style={{ width: 200 }}>
          <Select
            placeholder="医院状态"
            onChange={() => { }}
            allowClear
          >
            <Option value="1">已上线</Option>
            <Option value="0">未上线</Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
              查询
            </Button>

            <Button onClick={reset}>清空</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      <Table
        columns={columns}
        dataSource={hostypes}
        bordered
        rowKey={'id'}
        pagination={{
          total: 30,
          pageSize: 20,
          current: 1,
          showSizeChanger: true,
          pageSizeOptions: [3, 5, 8, 20],
          showQuickJumper: true,
          showTotal: total => {
            return `总计:${total}条`;
          },
        }}
      />
    </Card>
  )
}
